<template>
    <el-card class="user-card">
      <div class="user-info">
        <el-avatar :src="userInfo.avatar" :size="120" class="avatar"></el-avatar>
        <el-divider></el-divider>
        <el-form :model="userInfo" label-width="90px">
          <el-form-item label="昵称">
            <el-input v-model="userInfo.neckname" disabled></el-input>
          </el-form-item>
          <el-form-item label="网址">
            <el-input v-model="userInfo.website" disabled></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="userInfo.age" disabled></el-input>
          </el-form-item>
          <el-form-item label="国家">
            <el-input v-model="userInfo.country" disabled></el-input>
          </el-form-item>
          <el-form-item label="职业">
            <el-input v-model="userInfo.profession" disabled></el-input>
          </el-form-item>
          <el-form-item label="兴趣爱好">
            <el-input v-model="userInfo.hobbies" disabled></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </template>
  
  <script setup>
  import { ref ,onMounted } from 'vue';
import logoImage from '@/assets/log_icon.png'

  const userInfo = ref(
    {
    website: 'www.sgydhd.com',
    age: 26,
    avatar: logoImage,
    country: '中国',
    profession: '学生',
    hobbies: ['阅读', '旅行', '摄影'],
    neckname:'苏光阳'
  }
);



onMounted(() => {

});
  </script>
  
  <style scoped>
  .user-card {
    height: 100%;
    max-width: 600px;
    margin: 0 auto;
  }
  
  .avatar {
    margin-bottom: 20px;
  }
  
  .user-info {
    text-align: center;
    padding: 20px;
  }
  
  .user-info h2 {
    font-size: 24px;
    margin-bottom: 20px;
  }
  </style>
  